(function ($) {
    'use strict'

    /**
     *
     * @param $elem  当前的 dropdown (某一个有下拉框的元素)
     * @param options
     * @constructor
     */
    function Dropdown($elem, options) {
        this.$elem = $elem;
        this.options = options;
        this.$layer = $elem.find('.dropdown-layer'); //dropdown的下拉框元素
        //下拉框激活的样式 xx-active; 如果当前dropdown元素没有设置data-active属性,则使用默认值dropdown-active;
        this.activeClass = ($elem.data('active') || options.active) + '-active';
        this._init();
    }
    // 下拉框激活的样式: xx-active 默认是: dropdown-active; delay:延迟执行从时间  前三个参数:css3+js+animation 控制showHide模块的方式
    Dropdown.DEFAULTS = {css3: false, js: true, animation: 'fadeSlideLeftRight',delay: 100, active: 'dropdown'};
    /**
     * 1-绑定load事件   加载元素 data-load 属性对应的json文件
     * 2-指定show/hide事件的触发方式;  click or hover(鼠标移入移出) 触发
     * */
    Dropdown.prototype._init = function () {
        let self = this;
        //绑定事件
        this.$layer.showHide(this.options);//调用暴露的接口,初始化
        this.$layer.on('shown', function () {
                let dataLoad = self.$elem.data('load');
                if (!dataLoad) return;//$elem上没有load标识
                if (!self.$elem.data('loaded')) { //如果没有加载过
                    self.$elem.data('loaded', true);
                    let menuName = self.$elem.data('load_menu');// 站点导航模块: nav_site
                    if (menuName) self.$elem.trigger(menuName + '_load'); //触发xx-load 事件,xx就是对应的模块
                }
            }
        );
        //指定事件的触发方式: hover() = mouseenter(鼠标移入) + mouseleave(鼠标移出)
        this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));//改变了函数里的this指向
    }
    Dropdown.prototype.show = function () {
        let self = this
        if (this.options.delay) {
            this.timer = setTimeout(function () {
                _show();
            }, this.options.delay);
        } else _show();

        function _show() {
            self.$elem.addClass(self.activeClass);
            self.$layer.showHide('show');//调用函数
        }

    }
    Dropdown.prototype.hide = function () {
        if (this.options.delay) clearTimeout(this.timer);//如果是延迟执行,清除之前的定时任务
        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');//调用函数
    }
    //暴露接口 dropdown
    $.fn.extend({
        /**
         * option = {event: "hover", delay: 20, active: 'dropdown'}
         * 参数说明:  event: 控制下拉框的触发事件类型,可选值: click hover
         *          delay: 延迟执行 show 的时间
         *          active: 给当前元素添加的类名(xx-active) -->激活状态的样式
         */
        dropdown: function (option) {
            //    this = $(".dropdown") 有多个,所以使用 each 循环
            return this.each(function () { //默认参数: index,element
                let $this = $(this), dropdown = $this.data('dropdown');
                // {delay: 20, active: 'dropdown'}
                let options = $.extend({}, Dropdown.DEFAULTS, $this.data(), typeof option === 'object' && option);
                if (!dropdown) $this.data('dropdown', new Dropdown($this, options)); //单例模式;
            });
        }
    });
})(jQuery);